<!--
  User: Alex Tan
  Date: 2017/6/21
  Time: 14:54
-->
<!DOCTYPE html>
<link rel="stylesheet" href="/plugins/font-awesome/css/font-awesome.min.css"  type="text/css" />
<link rel="stylesheet" href="/plugins/layui/css/layui.css">
<link rel="stylesheet" href="/plugins/adminLte/css/AdminLTE.min.css">
<link rel="stylesheet" href="/css/global.css?v=1">

<head>
    <meta charset="UTF-8">
    <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <meta HTTP-EQUIV="expires" CONTENT="0">
</head>
<body style="height:auto;">
    <div  class="box box-primary">
        <div class="box-frame-with-header">
            <div class="box-header with-border">
                <h3 class="box-title">围墙机命名</h3>
            </div>
            <div class="box-body">
                <form class="layui-form layui-form-pane">
                    <div id="commSelect"></div>
                    <div id="gateAliasSet"></div>
                    <input name="commCode" type="hidden" id="commCode">
                    <div class="layui-form-item">
                        <button class="layui-btn layui-btn-normal layui-form-btn">确定</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>
<script src="/plugins/layui/layui.js"></script>
<script src="/plugins/jquery.min.js" type="text/javascript"></script>
<script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="/js/core/helper.js?v=5" type="text/javascript" ></script>
<script src="/js/core/building_utils.min.js?v=7" type="text/javascript" ></script>
<script src="/plugins/adminLte/js/app.min.js" type="text/javascript"></script>
<script>
    function genGateAliasSetArea(gateData) {
        $("#gateAliasSet").empty();
        var gateNum = $(gateData.elem).children("option:selected").data("gatenum");
        var gateAliasName = $(gateData.elem).children("option:selected").data("gatealias");
        var commCode = $(gateData.elem).children("option:selected").val();
        var aliasArray = gateAliasName.split(",");
        var appendStr = "";
        for(var i=0; i<parseInt(gateNum); i++){
            appendStr += '<div class="layui-form-item">'+
                            '<div class="layui-inline"> ' +
                                '<label class="layui-form-label">围墙机-'+ String.fromCharCode('A'.charCodeAt(0)+ i) +'</label> ' +
                                '<div class="layui-input-inline"> '+
                                    '<input name="gateAliasName" value="'+(aliasArray[i]!=undefined?aliasArray[i]:"")+'" class="layui-input">'+
                                '</div>' +
                             '</div>' +
                        '</div>';

        }
        $("#commCode").val(commCode);
        $("#gateAliasSet").append(appendStr);
    }
    layui.use(['layer','form', 'laypage'], function () {
        var layer = layui.layer;
        var form = layui.form();

        genCommSelect("commSelect",genGateAliasSetArea);
        form.render('select');

        form.on("submit",function () {
            postJson("/comm/setGateAliasName.x",$("form").serialize(),function (data) {
               layer.msg(data.data);
            });
            return false;
        })
    });
</script>